<template>
  <div> 
    <div class="mt-30 mb-20">
      <b class="blue-line">{{ $t('other.boardData') }}</b>
    </div>
    <a-form ref="formRef" :rules="kanbanRules" :model="formState" :label-col="{ span: 9}" :wrapper-col="{ span: 14 }"> 
      <a-row class="border px-20 pt-15">
        <a-col :span="12">
          <a-form-item :label="`1、${$t('other.returnCoefficient')}`" name="reworkPercent" >
            <a-input-number v-model:value="formState.reworkPercent"  :placeholder="$t('common.pleaseInput')" :min="0" :max="100" class="full-width"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`2、${$t('other.defectCoefficient')}`" name="defectPercent" >
            <a-input-number v-model:value="formState.defectPercent"  :placeholder="$t('common.pleaseInput')" :min="0" :max="100" class="full-width"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="`3、${$t('other.scrapCoefficient')}`" name="scrapPercent"  >
            <a-input-number v-model:value="formState.scrapPercent"  :placeholder="$t('common.pleaseInput')" :min="0" :max="100" class="full-width"/>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue' 
import { kanbanRules } from './config'
  let props = defineProps({
    info: {
      type: Object,
      default: () => {}
    }
  }) 
  let formState = ref({})
  let formRef = ref()


  watch(() => props.info, (val) => {
    formState.value = val
  }, { deep: true, immediate: true })

  onMounted(()=> {
    formRef.value.resetFields()
  }) 
  defineExpose({
    formRef,
    formState
  })
</script>
